<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="../../css/bootstrap.css" />
		<link rel="stylesheet" type="text/css" href="../../css/reset-css/reset-css.css" />

	</head>

	<body>
		<!--书籍页面-->
		<div class="book">
			<!--头部区域开始-->
			<div class="header">
				<div class="topbar">
					<div class="box_width">
						<!--左侧-->
						<span class="topbarL"><a href="#">提示文字：快速通道</a></span>
						<!--右侧-->
						<span class="topbarR">全国咨询/投诉热线：XXX-XXX-XXXX   举报邮箱:XX@qq.com</span>
					</div>
				</div>
				<!--导航栏开始-->
				<div class="nav">
					<div class="box_width">
						<ul class="ul">
									<li class="li">
								<a href="../../index.html">首页</a>
							</li>
							<li class="li">
								<a href="../Animation/index.html" target="_blank">CSS3动画</a>
							</li>
							<li class="li">
								<a href="../BigData/index.html" target="_blank">大数据</a>
							</li>
							<li class="li">
								<a href="../book/index.html" target="_blank">书籍库</a>
							</li>
							<li class="li">
								<a href="../system/index.html" target="_blank">课程体系</a>
							</li>
							<li class="li">
								<a href="../service/index.html" target="_blank">就业服务</a>
							</li>
							<li class="li">
								<a href="../OpenClass/index.html" target="_blank">公开课程</a>
							</li>
							<li class="li">
								<a href="../prospect/index.html" target="_blank">精品推荐</a>
							</li>
							<li class="li">
								<a href="../about/index.html" target="_blank">关于联系</a>
							</li>
						</ul>
					</div>
				</div>
				<!--导航栏结束-->
				<!--轮播图区域开始-->
				<div class="banner">
					<div id="myCarousel" class="carousel slide">
						<!-- 轮播（Carousel）指标 -->
						<ol class="carousel-indicators">
							<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
							<li data-target="#myCarousel" data-slide-to="1"></li>
						</ol>
						<!-- 轮播（Carousel）项目 -->
						<div class="carousel-inner">
							<div class="item active">
								<div class="Img">
									<img src="../../img/picture/banbg1.jpg" />
									<img src="../../img/picture/banbg2.jpg" />
								</div>

								<div class="carousel-caption">人工智能开发</div>
							</div>
							<div class="item">
								<div class="Img">
									<img src="../../img/picture/banbg3.jpg" />
									<img src="../../img/picture/banbg4.jpg" />
								</div>
								<div class="carousel-caption">编程计算</div>
							</div>
						</div>
						<!-- 轮播（Carousel）导航 -->
						<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
							<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
							<span class="sr-only">Previous</span>
						</a>
						<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
							<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
							<span class="sr-only">Next</span>
						</a>
					</div>

				</div>
				<!--轮播图区域结束-->
			</div>
			<!--头部区域结束-->

			<!--主要内容区域开始-->
			<div class="main">
				<div class="box_width">
					<!--标题-->
					<div class="title">
						<h3>好程序员系列丛书</h3>
						<ul>
							<li v-for="(item,index) in mainNav" :class="{'li_first':mainIndex==index}" @click="NavLi(item,index)">{{item.name}}</li>
						</ul>
					</div>
					<!--书籍区域开始-->
					<div class="book_li">
						<!--左侧内容-->
						<div class="book_L">
							<!--标题-->
							<div class="Title">
								{{this.mainBook}}从入门到精通
							</div>
							<p>本书是JavaScript初学者的不二之选，本书循序渐进、由浅入深、内容丰富，实战性强，全面覆盖JavaScript的核心语法。 本书即可作为各高等院校相关专业的教材，也可作为培训机构的教学用书，同时也非常适合广大Web前端爱好者自学。</p>
							<span>特色</span>
							<div class="TextP">
								<p>本书特色介绍有以下四点：</p>
								<p>1.攻克难点：使用图例、生活实例对难以理解的抽象概念和原理作通俗易懂的诠释,尽量减少晦涩术语的使用,降低学生理解抗性。</p>
								<p>2.突出热点：对开发中用到的、企业面试考到的知识点和技术作重点讲解,对企业级开发中遇到的热门需求提供了简化版的解决方案。</p>
								<p>3.由浅入深：讲解由浅入深、循序渐进,摒弃上帝视角,以初学者的认知方式铺排知识点,步骤分明,方便学生自主学习,减少授课老师的工作量。</p>
								<p>4.面向就业：通过案例和实战项目提升学生的编码能力,引领学生在实战中建立起自己的知识体系,让学生领悟到开发的乐趣和精髓。</p>
							</div>
							<div class="Btm">
								<a href="#">课程介绍</a>
								<a href="#">课程视频</a>
								<a href="#">练习题 </a>
								<a href="#">资料下载</a>
							</div>
						</div>
						<!--右侧图片-->
						<div class="book_R">
							<div class="BoxImg">
								<div class="Img">
									<img :src="mainUrl" />
								</div>
								<div class="BoxImg_R">
									<p>作者：{{this.mainBook}}产品研发部</p>
									<p>书名：{{this.mainBook}}语言程序设计</p>
									<p>出版社：{{this.mainBook}}出版社</p>
									<p>定价：<span>¥{{this.mainPrice}}</span></p>
									<p>页码：{{this.mainPage}}页</p>
								</div>
							</div>
							<div class="BJImg">
								<img src="img/book0.png" />
							</div>
						</div>

					</div>
					<!--内容区域结束-->
					<!--书籍区域开始-->
					<div class="book_li">
						<!--左侧内容-->
						<div class="book_L">
							<!--标题-->
							<div class="Title">
								{{this.mainBook}}从入门到精通
							</div>
							<p>本书是JavaScript初学者的不二之选，本书循序渐进、由浅入深、内容丰富，实战性强，全面覆盖JavaScript的核心语法。 本书即可作为各高等院校相关专业的教材，也可作为培训机构的教学用书，同时也非常适合广大Web前端爱好者自学。</p>
							<span>特色</span>
							<div class="TextP">
								<p>本书特色介绍有以下四点：</p>
								<p>1.攻克难点：使用图例、生活实例对难以理解的抽象概念和原理作通俗易懂的诠释,尽量减少晦涩术语的使用,降低学生理解抗性。</p>
								<p>2.突出热点：对开发中用到的、企业面试考到的知识点和技术作重点讲解,对企业级开发中遇到的热门需求提供了简化版的解决方案。</p>
								<p>3.由浅入深：讲解由浅入深、循序渐进,摒弃上帝视角,以初学者的认知方式铺排知识点,步骤分明,方便学生自主学习,减少授课老师的工作量。</p>
								<p>4.面向就业：通过案例和实战项目提升学生的编码能力,引领学生在实战中建立起自己的知识体系,让学生领悟到开发的乐趣和精髓。</p>
							</div>
							<div class="Btm">
								<a href="#">课程介绍</a>
								<a href="#">课程视频</a>
								<a href="#">练习题 </a>
								<a href="#">资料下载</a>
							</div>
						</div>
						<!--右侧图片-->
						<div class="book_R">
							<div class="BoxImg">
								<div class="Img">
									<img :src="mainUrl" />
								</div>
								<div class="BoxImg_R">
									<p>作者：{{this.mainBook}}产品研发部</p>
									<p>书名：{{this.mainBook}}语言程序设计</p>
									<p>出版社：{{this.mainBook}}出版社</p>
									<p>定价：<span>¥{{this.mainPrice}}</span></p>
									<p>页码：{{this.mainPage}}页</p>
								</div>
							</div>
							<div class="BJImg">
								<img src="img/book0.png" />
							</div>
						</div>

					</div>

				</div>
				<!--主要内容区域结束-->

				<!--底部内容结束-->
				<div class="footer">
					<div class="box_width">
						<!--导航栏-->
						<div class="nav">
							<div class="navLi" v-for="(item,index) in footerNan" @click="Footer(item,index)" :class="{'navLiA':index==footerIndex}">{{item.name}}</div>
						</div>
						<!--主要区域-->
						<div class="main">
							<!--主要左侧-->
							<div class="main_left">
								<ul>
									<li>{{this.footerCity}}</li>
									<li>咨询电话：<span>888-8888-888888</span></li>
									<li>面授课程：HTML5大前端培训、JavaEE+分布式开发培训、Python人工智能+数据分析培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、网络安全培训、区块链培训、影视剪辑包装培训、游戏原画培训、全媒体运营培训</li>
									<li>认证课程：软考、Adobe认证、PMP认证、红帽RHCE认证</li>
								</ul>
							</div>
							<!--主要右侧-->
							<div class="main_right">
								<div class="box" v-for="(item,index) in 3">
									<div class="img">
										<img src="../../img/picture/QRcode.png" />
									</div>
									<p>扫一扫了解更多课程</p>
								</div>
							</div>
						</div>
						<div class="Btm">
							<div class="BtmNan">
							</div>
						</div>
					</div>
				</div>
				<!--底部内容结束-->
			</div>
	</body>
	<script src="../../js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
	<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/index.js" type="text/javascript" charset="utf-8"></script>

</html>